<template>
  <div>
    <!-- 第一排表格 -->
    <div class="one">
      <h3>时令热搜</h3>
      <table class="one1">
        <tr>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
        </tr>
        <tr>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
        </tr>
        <tr>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
          <router-link to="/details"><td>粽子</td></router-link>
        </tr>
      </table>
    </div>
    <!-- 首页大部分区域 -->
    <div class="two">
      <div class="tit">
        <h3>最新食谱</h3>
        <router-link to="/caipu/cp">更多>></router-link>
      </div>
      <hr />

      <div class="chang">
        <router-link to="/details"><img src="" /></router-link>
        <div>
          <router-link to="/details"> 干锅千叶豆腐 </router-link>
        </div>
      </div>

      <div class="six">
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="tit">
        <h3>本周最热</h3>
        <router-link to="/caipu/cp">更多>></router-link>
      </div>
      <hr />

      <div class="chang">
        <router-link to="/details"><img src="" /></router-link>
        <div>
          <router-link to="/details"> 干锅千叶豆腐 </router-link>
        </div>
      </div>

      <div class="six">
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="tit">
        <h3>本月最热</h3>
        <router-link to="/caipu/cp">更多>></router-link>
      </div>
      <hr />

      <div class="chang">
        <router-link to="/details"><img src="" /></router-link>
        <div>
          <router-link to="/details"> 干锅千叶豆腐 </router-link>
        </div>
      </div>

      <div class="six">
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
        <div>
          <router-link to="/details">
            <img src="" style="display: block; width: 190px; height: 100px" />
            <span>肉肉肉</span>
            <div>
              <img src="" style="display: block; width: 20px; height: 20px" />
              <span>好吃的肉</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.one {
  // border: 1px solid black;
  width: 600px;
}
h3 {
  color: #817c74;
  display: block;
  margin: 10px 0;
}

.one1 {
  border-collapse: collapse;
  td {
    border: 1px solid #eae6e3;
    width: 108px;
    line-height: 20px;
    padding: 5px;
  }
  a {
    text-decoration: none;
    color: black;
  }
  td:hover {
    background-color: #fa7e3e;
  }
}
.two {
  width: 600px;
  // border: 1px solid black;
  .tit {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    h3 {
      color: #817c74;
      display: block;
      margin: 0;
      margin-top: 10px;
    }
    a {
      text-decoration: black;
      color: black;
    }
    a:hover {
      color: #fa7e3e;
    }
  }
  .chang {
    display: flex;
    img {
      display: block;
      width: 400px;
      height: 150px;
    }
    div {
      border: 1px solid #eae6e3;
      width: 200px;
      height: 150px;
      a {
        text-decoration: none;
        color: black;
        display: block;
        margin: 8px;
      }
    }
  }
  .six {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > div {
      border: 1px solid #eae6e3;
      margin-top: 10px;
      span {
        font-size: 6px;
      }
      a {
        text-decoration: none;
        color: black;
      }
    }
    > div:hover {
      border: 1px solid #fa7e3e;
    }
  }
  img {
    background-color: #817c74;
  }
}
</style>